<template>
<div class="search-component">
    <div class="header">
    <!-- 信息框 -->
    <el-input v-model="info" placeholder="空域信息" style="width: 100px;" disabled size="default"></el-input>

    <!-- 下拉选项框 -->
    <el-select v-model="selectedOption" placeholder="空域类型" style="width: 100px;">
        <el-option label="获批空域" value="获批空域"></el-option>
        <el-option label="限飞空域" value="限飞空域"></el-option>
        <el-option label="禁飞空域" value="禁飞空域"></el-option>
    </el-select>

    <!-- 日期选择框 -->
    <el-date-picker v-model="selectedDate" placeholder="选择日期" style="width: auto;"></el-date-picker>

    <!-- 搜索按钮 -->
    <el-button type="primary" @click="handleSearch">搜索</el-button>
    </div>

    <!-- 数据表格 -->
    <el-table :data="tableData" style="width: 100%;" border>
    <el-table-column label="空域名称" prop="name" ></el-table-column>
    <el-table-column label="空域类型" prop="type"></el-table-column>
    <el-table-column label="创建时间" prop="createTime"></el-table-column>
    <el-table-column label="有效期限" prop="validTime"></el-table-column>
    <el-table-column label="操作" width="180">
        <template #default="{ row }">
        <el-button @click="handleView(row)" size="default">查看</el-button>
        <el-button @click="handleEdit(row)" size="default" type="primary" disabled>编辑</el-button>
        <el-button @click="handleDelete(row)" size="default" type="danger" disabled>删除</el-button>
        </template>
    </el-table-column>
    </el-table>
</div>
</template>

<script lang="ts" setup>
import { ref,defineEmits } from 'vue';
import { ElInput, ElSelect, ElOption, ElButton, ElDatePicker, ElTable, ElTableColumn } from 'element-plus';
import axios from 'axios';

// 其他组件传入内容
const AddGraphicLayer = 'add-graphic-layer';
const RemoveGraphicLayer = 'remove-graphic-layer';

const emit = defineEmits([AddGraphicLayer,RemoveGraphicLayer]);


// 用户输入状态
const info = ref('');
const selectedOption = ref('');
const selectedDate = ref(null);

// 表格数据
const tableData = ref<any[]>([]);


// 搜索方法
const handleSearch = async () => {
    try {
        const response = await axios.post('http://localhost:3000/query', {
            airType: selectedOption.value,
            date: Date2Unix(selectedDate.value)
        });
        // console.log('查询成功:', response.data);
        let resData = response.data;
        resData.forEach((item:any) => {
            let createTime = new Date(item.createTime*1000);
            let formattedDate = showDateFromUnixTime(createTime);
            item.createTime = formattedDate;
            let formattedDate2 = showDateFromUnixTime(new Date(item.validTime*1000));
            item.validTime = formattedDate2;
            // console.log(`${item.name},createTime:${formattedDate},validTime:${formattedDate2}`);
        });
        // NOTE:在表格中进行展示
        tableData.value = resData; // 假设返回的数据是数组形式
    } catch (error) {
        console.error('查询失败:', error);
    }
};

// 查看按钮点击事件
const handleView = (row: any) => {
    // TODO:点击查看后添加图形至地图中
    console.log('查看行:', row.name);

    emit(AddGraphicLayer,row.name);
};

// 编辑按钮点击事件
const handleEdit = (row: any) => {
    console.log('编辑行:', row);
};

// 删除按钮点击事件
const handleDelete = (row: any) => {
    console.log('删除行:', row);
};



function Date2Unix(date:Date){
    if (date) {
        // 获取 Unix 时间戳（以秒为单位）
        const unixTimestamp = Math.floor(date.getTime() / 1000);
        return unixTimestamp;
    } else {
        console.error("Fail to transform date.");
    }
};

function showDateFromUnixTime(date:Date){
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，加1后补零
    const day = String(date.getDate()).padStart(2, '0'); // 补零

    const formattedDate = `${year}-${month}-${day}`;
    return formattedDate;
}


</script>

<style scoped>
.search-component {
margin: 20px;
}

.header {
margin-bottom: 20px;
}

.el-button {
margin-left: 10px;
}
/* TODO:调整表头宽度 */
.el-table-column{
width: auto;
}
</style>
